<template>

  <el-dialog
    title="上传图片"
    :visible.sync="show"
    width="width"
    :before-close="cancel"
  >
    <div class="line"></div>
    <div>
      <div class="upload-main flex flex-between">
        <!-- 左边部分 -->
        <el-upload
          v-if="chooseList.length == 0"
          action="void"
          multiple
          accept=".jpg,.png,.mov,.mp4"
          :http-request="customUpload"
          :on-success="uploadSuccess"
          :on-remove="handleRemove"
          :on-progress="progress"
          ref="upload"
          :auto-upload="true"
          :limit="1"
          :on-exceed="exceed"
          :show-file-list="false"
          :before-upload="beforeImgUpload"
        >
          <div class="upload-wrap flex flex-col flex-center">
            <img
              class="icon"
              src=""
              alt=""
            >
            <span>上传图片/视频</span>
            <span>(jpg. png. mov. mp4)</span>
          </div>
        </el-upload>

        <!-- 已选择图片 -->
        <div
          class="uploaded-wrap"
          v-else
        >
          <div
            class="uploaded-wrap-item"
            v-for="(item,index) of chooseList"
            :key="index"
          >
            <img
              :src="item.fileUrl"
              alt=""
            >
            <i
              class="el-icon-error"
              @click="delImg(item,index)"
            ></i>
          </div>
          <el-upload
            action="void"
            accept=".jpg,.png,.mov,.mp4"
            :http-request="customUpload"
            :on-remove="handleRemove"
            :on-progress="progress"
            ref="upload"
            :auto-upload="true"
            :limit="9"
            :on-exceed="exceed"
            :show-file-list="false"
            :file-list="chooseList"
          >
            <div
              class="add-img"
              v-if="chooseList.length != 9"
            >
              <i class="el-icon-plus"></i>
            </div>
          </el-upload>

        </div>

        <!-- 右边部分 -->
        <div class="material-wrap">
          <div class="title">素材库</div>
          <div class="content">
            <div class="material-item" v-for="(item,index) of materialList"
                :key="index">
              <img
                class="cover"
                :src="item.fileUrl"
                alt=""
                @click="chooseImg(item,index)"
              >
              <img class="checked" v-if="item.checked" src="../../../../assets/image/checked-icon.png">

              </img>
            </div>
            
            <div class="mask"></div>
          </div>

        </div>
      </div>
      <div class="line"></div>

      <div class="footer flex justify-content">
        <el-button
          type="info"
          class="cancel"
          @click="cancel"
        >取消</el-button>
        <el-button
          type="primary"
          class="confirm"
          @click="confirm"
        >确定</el-button>
      </div>
    </div>

  </el-dialog>

</template>

<script>
// import x from ''
import axios from 'axios'
import {
  getToken
} from '@/utils/auth'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  data() {
    return {
      materialList: [{fileUrl: "http://114.55.105.176:7000/temp/20210531053851-9650.png"}, {fileUrl: "http://wximg.ycvod.cn/22biaobai.png"}, {fileUrl: "http://wximg.ycvod.cn/22shengrizhufu.jpg"}, {fileUrl: "http://wximg.ycvod.cn/33guanggao.jpg"}], // 素材库数据
      percent: 0, // 上传进度
      chooseList: [] // 已选择的图片
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.initData()
  },
  methods: {
    initData(){
      this.materialList.map(item => {
        item.checked = false
      })
    },
    // 删除图片
    delImg(item, index) {
      this.chooseList.splice(index, 1)
      item.checked = false
    },
    // 选择素材库图片
    chooseImg(item,index) {
      if(this.chooseList.length >= 9){
        this.$message.error('最多选择9张图片')
        return
      }
      item.checked = item.checked ? false : true
      if (item.checked) {
        this.chooseList.push(item)
      } else {
        this.chooseList = this.chooseList.filter(items => items.fileUrl !== item.fileUrl)
      }

      this.$forceUpdate()
    },
    // 确认上传图片
    confirm() {
      this.$emit('confirmUpload')
    },
    // 取消上传图片
    cancel() {
      this.$emit('cancelUpload')
    },
    // 检验文件
    beforeImgUpload(file) {
      const isPDF = file.type === 'application/png'
      const isLt100M = file.size / 1024 / 1024 < 100
      if (!isPDF) {
        this.$message.error('上传文件只能是 PDF 格式!')
      }
      if (!isLt100M) {
        this.$message.error('上传PDF大小不能超过 100MB!')
      }
      return isPDF && isLt100M
    },
    // 上传文件
    customUpload(file) {
      let FormDatas = new FormData()
      FormDatas.append('file', file.file)
      axios({
        url: 'http://114.55.105.176:7005/productfile/upLoad',
        method: 'post',
        data: FormDatas,
        headers: {
          "Access-Token": getToken()
        },
        //上传进度
        onUploadProgress: progressEvent => {
          let num = ((progressEvent.loaded / progressEvent.total) * 100) | 0 //百分比
          file.onProgress({ percent: num }) //进度条
        }
      })
        .then(res => {
          console.log(res.data.data)
          for(var i in res.data.data){
            if(i == "fileUrl"){
              i = 'http://114.55.105.176:7000/temp/' + res.data.data[i]
              const params = {
                fileUrl: i
              }
              this.chooseList.push(params)
            }
          }
          console.log(this.chooseList)
          this.$message({
            type: 'success',
            message: '上传成功!'
          })
          file.onSuccess() //上传成功(打钩的小图标)
        })
        .catch((err) => {
          console.log(err)
          this.$message.error('上传失败!')
        })
    },
    /**     文件正在上传时的钩子    **/
    progress(event, file) {
      this.percent = event.percent
    },
    exceed() {
      this.$message('不能上传更多')
    },
    uploadSuccess(response, file, fileList){
      // console.log(response)
      // console.log(file)
      // console.log(fileList)

    },
    /**     移除上传文件    **/
    handleRemove(file) {
      // this.$refs.upload.abort() //取消上传
      // this.$message({ message: '成功移除' + file.name, type: 'success' })
    }
  }
}
</script>
<style lang='scss'>
// .upload-pop {
.el-dialog {
  width: 900px;
  height: 600px;
  background: #ffffff;
  box-shadow: 0px 2px 14px 0px rgba(153, 153, 153, 0.5);
  border-radius: 8px;
}
.el-dialog__title {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
}
.el-dialog__body {
  padding: 0;
  
}
.line {
  width: 100%;
  height: 1px;
  background: #e9e9e9;
  margin: 0;
}
div {
  
  .upload-main {
    position: relative;
    height: 453px;
    padding: 31px 47px 10px 45px;
    box-sizing: border-box;
    .upload-wrap {
      width: 360px;
      height: 360px;
      background: #f2f2f2;
      border-radius: 4px;
      .icon {
        margin-top: 136px;
        margin-bottom: 28px;
        height: 44px;
        width: 44px;
        background-color: #eee;
      }
      span {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #848484;
      }
    }
    .uploaded-wrap {
      // overflow: hidden;
      height: auto;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 13px;
      .uploaded-wrap-item {
        width: 122px;
        height: 122px;
        background-color: #eee;
        position: relative;
        img{
          width: 122px;
        height: 122px;
        }
      }
      .add-img {
        width: 122px;
        height: 122px;
        text-align: center;
        background: #f9f9f9;
        border-radius: 8px;
        border: 1px dashed #979797;
        line-height: 122px;
        .el-icon-plus {
          font-size: 24px;
          color: rgba(0, 0, 0, 1);
        }
      }
    }
    .el-icon-error {
      font-size: 12px;
      position: absolute;
      right: -5px;
      top: -5px;
      color: rgba(102, 102, 102, 1);
    }
    .material-wrap {
      overflow-y: scroll;
      .title {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        margin-bottom: 15px;
      }
      .content {
        width: 368px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-column-gap: 15rpx;
        gap: 12px;
        .material-item{
          width: 64px;
          height: 64px;
          position: relative;
          // margin-top: 12px;
          .cover {
            position: absolute;
            left: 0;
            top: 0;
            margin-bottom: 12px;
            width: 64px;
            height: 64px;
            background: #eee;
            border-radius: 5px;
          }
          .checked{
            width: 14px;
            height: 14px;
            position: absolute;
            right: 3px;
            top: 3px;
          }
        }
        
        .mask {
          position: absolute;
          left: 468px;
          bottom: 0px;
          width: 395px;
          height: 108px;
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.52) 30%,
            #ffffff 100%
          );
        }
      }
    }
  }
  .footer {
    height: 91px;
    align-items: center;
    .confirm {
      background: #015dff;
      margin-left: 40px;
      width: 88px;
      height: 36px;
      // line-height: 36px;
    }
    .cancel {
      width: 88px;
      height: 36px;
      // line-height: 36px;
      background-color: #fff;
      color: rgba(68, 68, 68, 0.85);
    }
  }
}
// }
</style>